<template>
  <div :class="[`${prefixCls}__header px-2 py-5`, $attrs.class]">
    <BasicTitle :helpMessage="helpMessage" normal>
      <template v-if="title">
        {{ title }}
      </template>
      <template v-else>
        <slot name="title"></slot>
      </template>
    </BasicTitle>
    <div :class="`${prefixCls}__action`">
      <slot name="action"></slot>
      <div @click.stop="expand">
        <BasicArrow v-if="canExpan" up :expand="show" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { BasicArrow, BasicTitle } from '/@/vbenComponents/Basic'

const emit = defineEmits(['expand'])
defineProps({
  prefixCls: { type: String },
  helpMessage: {
    type: [Array, String] as PropType<string[] | string>,
    default: '',
  },
  title: { type: String },
  show: { type: Boolean },
  canExpan: { type: Boolean },
})
const expand = () => emit('expand')
</script>
